<template>
	<view class="box-c l3">
		<scroll-view lower-threshold="500" @scrolltolower='nextPage()' scroll-y="true" :style="{height:shopHeight+'px'}">
			<view class="box card rounded-20 animated fadeIn d-ac-c"  @tap="productList(shop)"
				v-for="(shop,index) in shopList">
			<view class="box d-jc-c">
			<image style="z-index: 1;border: solid 1rpx #e8e8e8;" :src="shop.shopLogo" class="box logo" mode=""></image>
			</view>
				<view class="box-c d-jc-c">
					<view class="box">
						<text style="font-size: 32rpx;font-weight: 800;">{{shop.shopName}}</text>
						<text class="describe-font"
							style="height: 60rpx;line-height: 60rpx; position: absolute; right: 100rpx;">{{shop.distance}}</text>
					</view>
					<view class="box" style="margin-left: -8rpx;">
						<text class="describe-font date">{{shop.workTime}}</text>
					</view>
					<view class="box">
						<text class="describe-font">
							{{shop.city}} {{shop.district}} {{shop.address}}
						</text>
					</view>
					<view class="box tag-box" v-if="classifyId!==3">
						<view class="tag" v-for="item in shop.shopLabelDto">
							<text style="padding: 0rpx 10rpx;color: #ff3d3d;">
								{{item}}
							</text>
						</view>
	
					</view>
	
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"shopList",
		props: {
			shopList: {
				type: Array,
				default: []
			},
			shopHeight: {
				type: Number,
				default: 500
			},
			classifyId:{
				type:Number,
				default:''
			}
		
		},
		data() {
			return {
				hasNextPage: true,
				pageNum: 1,
				pageSize: 5,
				
			};
		},
		methods:{
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getShopList({
						classifyId: this.classifyId,
						longitude: this.longitude,
						latitude: this.latitude,
						cityCodeCity: this.citycode
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.data.list.length; i++) {
								this.shopList.push(res.data.data.list[i])
							}
							this.hasNextPage = res.data.data.hasNextPage
						}
					})
				} else {
			
			
				}
			
			},
			productList(shop) {
				console.log(JSON.stringify(shop))
				if (shop.isActivity == 2) {
					uni.navigateTo({
						url: '/pages/shopList/product-activity?shopId=' + shop.shopId + '&classifyId=' + shop
							.classifyId,
						animationType: 'pop-in',
						animationDuration: 200
					})
				} else if (shop.isActivity == 1) {
					uni.navigateTo({
						url: '/pages/shopList/product?shopId=' + shop.shopId + '&classifyId=' + shop.classifyId,
						animationType: 'pop-in',
						animationDuration: 200
					})
				}
			
			}
			
		}
	}
</script>

<style lang="less">

.describe-font {
		font-size: 22rpx;
		font-weight: 400;
		color: #888181;
	}

	.describe-font.date {
		padding: 0rpx 8rpx;
	}

	.tag-box {
		margin-left: -10rpx;
		flex-wrap: wrap;
		padding-bottom: 10rpx;
	}

	.tag {
		margin: 5rpx 5rpx;
		flex-wrap: wrap;
		justify-content: space-around;
		border-radius: 8rpx;
		background-color: #ff7d7d;
		background-color: rgba(255, 79, 79, 0.3)
	}


	.card {
		width: 700rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		height: 180rpx;
		margin-top: 10px;
		/* -moz-box-shadow: #d5d5d5 0px 0px 10px; */
		/*firefox*/
		/* -webkit-box-shadow: #eeeeee 0px 0px 10px; */
		/*safari或chrome*/
		/* box-shadow: #cecece 0px 0px 10px; */
		/*opera或ie9*/
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx 10rpx 40rpx 10rpx;
		border-radius: 20rpx;
	}

	.tabbar {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

</style>
